<template>
  <div>
    <div class="outmain ba_f infastorder">
      <div class="shuju_title mar_b20">
        <div class="shuju_title_text">
          <span>快餐订单</span>
        </div>
      </div>
      <el-tabs v-model="orderType" class="mar_b20" @tab-click="handleTabClick2">
        <el-tab-pane label="订单管理" name="1"></el-tab-pane>
        <el-tab-pane label="订单查询" name="2"></el-tab-pane>
      </el-tabs>
      <div class="ba_f8 pad_20 mar_b20">
        <div class="lh25 mar_t10 msgtext fon_12">
          温馨提示：<br>
          1、此功能建议配合云喇叭+小票机打印更方便高效，叫号功能需先配置百度云语音Ai功能；<br>
          2、订单排号大屏幕：<span @click="chickScreen" class="subjectcolor2 curs">{{ path }}</span>。<br>
        </div>
      </div>
      <div class="flex-bet flex-y-top">
        <el-form :inline="true" :model="formInline" class="demo-form-inline searchform">
          <div>
            <el-form-item label="订单号" class="mar_l20">
              <el-input v-model="formInline.keyword" size="medium" placeholder="请输入订单号"
                        @input="onSearch"></el-input>
            </el-form-item>
            <el-form-item label="下单时间" class="mar_l20">
              <el-radio-group v-model="formInline.tabPosition" class="mar_r20" @change="onSearch">
                <el-radio-button label="1">今天</el-radio-button>
                <el-radio-button label="2">昨天</el-radio-button>
                <el-radio-button label="3">一周</el-radio-button>
                <el-radio-button label="0">全部</el-radio-button>
              </el-radio-group>
              <el-date-picker
                  v-model="formInline.timeData"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期">
              </el-date-picker>
            </el-form-item>
            <el-form-item class="mar_l20">
              <el-button type="primary" @click="onSearch" size="medium">搜索</el-button>
              <el-button size="medium" @click="getCode">查看快餐码</el-button>
            </el-form-item>
          </div>
        </el-form>
      </div>
      <!--            <div class="pad_20 ba_f8 mar_t20">排号大屏幕：<span @click="chickScreen" class="subjectcolor2 curs">{{path}}</span></div>-->
      <div class="flex-bet flex-y-top mar_t20" v-cloak>
        <div class="bflex-7 orderLeft">
          <el-tabs v-model="activeName" class="mar_b20" @tab-click="handleTabClick">
            <el-tab-pane label="待完成" name="1"></el-tab-pane>
<!--            <el-tab-pane label="制作中" name="2"></el-tab-pane>-->
            <el-tab-pane label="已完成" name="2"></el-tab-pane>
            <el-tab-pane label="已取消" name="3"></el-tab-pane>
            <el-tab-pane label="全部" name="0"></el-tab-pane>
          </el-tabs>
          <div v-if="orderListData && orderListData.length>0">
            <div class="orderList pad_20 flex-bet curs"
                 v-for="(item,index) in orderListData" :key="index"
                 :class="{'orderListHover':orderListHover==index}"
                 @click="clickOrderList(item,index)"
            >
              <div class="flex-g-0 number fon_16" :class="item.isOut=='2'?'number2':'number'">{{ item.callNo }}</div>
              <div class="flex-g-1 wei fon_12 color_3 mar_l10">
                <div class="flex-bet">
                  <div>支付时间：{{ item.payAt }}</div>
                  <div v-show="item.callNum>0">叫号次数：{{ item.callNum }}</div>
                </div>
                <div class="flex-bet">
                  <div>订单号：{{ item.outTradeNo }}</div>
                  <div class=""></div>
                </div>
                <div class="flex-bet">
                  <div>实付金额：{{ item.money }}
                    <span class="mar_l5 color-green" v-if="item.state==2 || item.state==3 || item.state==4 || item.state==6 || item.state==8">(已支付)</span>
                    <span class="mar_l5 color-red" v-if="item.state==7 || item.state==9">(已退款)</span>
                  </div>
                  <div>
                    <div class="msgNumber">
                      <span v-show="item.state=='2'" class="type bg3">待接单</span>
                      <span v-show="item.state=='3'" class="type bg2">制作中</span>
                      <span v-show="item.state=='4'" class="type bg4">已完成</span>
                      <span v-show="item.state=='5'" class="type bg4">已取消</span>
                      <span v-show="item.state=='6'">申请退款</span>
                      <span v-show="item.state=='7'" class="color-red">退款成功</span>
                      <span v-show="item.state=='8'">拒绝退款</span>
                      <span v-show="item.state=='9'" class="color-red">商户拒单并退款</span>
                    </div>
                  </div>
                </div>
                <div class="flex">
                  <div>消费方式:</div>
                  <div class="mar_l10">
                    <div class="type2" v-show="item.isOut=='1'">店内就餐</div>
                    <div class="type2" v-show="item.isOut=='2'">打包带走</div>
                  </div>
                </div>
              </div>
            </div>
            <el-pagination
                background
                layout="prev, pager, next"
                :total="page.total"
                :page-size="page.size"
                :current-page.sync='page.currentPage'
                :hide-on-single-page="page.value"
                @current-change="handleCurrentChange">
            </el-pagination>
          </div>
          <div v-show="orderListData.length==0" class="zwsj flex-center">
            <div class="t_c">
              <div><img src="../../assets/img/order/quxiaodan.png" style="width: 180px;height: 180px;"/></div>
              <div class="mar_t10">暂无订单</div>
            </div>
          </div>
        </div>
        <div class="bflex-3 orderMsg pad_20"
             v-if="orderListData && orderListData.length>0">
          <div v-for="(ditem,dindex) in orderListData[orderListHover].detail" :key="dindex">
<!--            <div class="msgNumber">状态：-->
<!--              <span v-show="ditem.state=='2'">待接单</span>-->
<!--              <span v-show="ditem.state=='3'">制作中</span>-->
<!--              <span v-show="ditem.state=='4'">已完成</span>-->
<!--              <span v-show="ditem.state=='5'">已取消</span>-->
<!--              <span v-show="ditem.state=='6'">申请退款</span>-->
<!--              <span v-show="ditem.state=='7'" class="">退款通过</span>-->
<!--              <span v-show="ditem.state=='8'">拒绝退款</span>-->
<!--              <span v-show="ditem.state=='9'" class="color-red">商户拒单并退款</span>-->
<!--            </div>-->
            <div class="shuju_title">
              <div class="shuju_title_text">
                <span>顾客信息</span>
              </div>
            </div>
            <div class="bor_b_de4 pad_b_10 fon_12 lh25 color_6">
              <div class="flex">
                <div class="bflex-5"><span class="wei">用户昵称</span>：
                  <span v-if="ditem.origin!='5'">{{ ditem.userName }}(uid:{{ ditem.userId }})</span>
                  <span v-else>无</span>
                </div>
                <div class="bflex-5"><span class="wei">手机号：</span>
                  <span v-if="ditem.origin!='5'">{{ ditem.userTel }}</span>
                  <span v-else>无</span>
                </div>
              </div>
            </div>
            <div class="shuju_title">
              <div class="shuju_title_text">
                <span class="wei">订单信息</span>
              </div>
            </div>
            <div class="bor_b_de4 pad_b_10 fon_12 lh25 color_6">
              <div class="flex">
                <div class="bflex-5">
                  <span class="wei">订单来源：</span>
                  <span v-show="ditem.origin=='1'">微信小程序</span>
                  <span v-show="ditem.origin=='2'">微信公众号</span>
                  <span v-show="ditem.origin=='3'">支付宝小程序</span>
                  <span v-show="ditem.origin=='4'">百度小程序</span>
                  <span v-show="ditem.origin=='5'">收银台下单</span>
                </div>
                <div class="bflex-5"><span class="wei">取单号：</span>
                  {{ ditem.callNo }}
                </div>
              </div>
              <div class="flex">
                <div class="bflex-5">
                  <span class="wei">消费方式：</span>
                  <span v-show="ditem.isOut=='1'">店内就餐</span>
                  <span v-show="ditem.isOut=='2'">打包带走</span>
                </div>
                <div class="bflex-5"><span class="wei">订单号：</span>{{ ditem.outTradeNo }}</div>
              </div>
              <div class="flex">
                <div class="bflex-5"><span class="wei">订单金额：</span>{{ (+ditem.money) + (+ditem.allPreferential) }}<span v-if="ditem.vipDiscount>0">（会员优惠：{{ditem.vipDiscount}}）</span></div>
                <div class="bflex-5"><span class="wei">订单优惠：</span>{{ ditem.allPreferential }}</div>
              </div>
              <div class="flex">
                <div class="bflex-5"><span class="wei">实付金额：</span><span class="color_rb wei">{{ ditem.money }}</span>
                </div>
                <div class="bflex-5"><span class="wei">支付方式：</span>
                  <span v-show="ditem.payMode=='1'">微信支付</span>
                  <span v-show="ditem.payMode=='2'">支付宝支付</span>
                  <span v-show="ditem.payMode=='3'">百度支付</span>
                  <span v-show="ditem.payMode=='4'">公众号支付</span>
                  <span v-show="ditem.payMode=='5'">余额支付</span>
                  <span v-show="ditem.payMode=='6'">线下支付（现金支付）</span>
                  <span v-show="ditem.payMode=='7'">线下支付（pos机支付）</span>
                  <span v-show="ditem.payMode=='8'">线下支付（自有微信支付）</span>
                  <span v-show="ditem.payMode=='9'">线下支付（自有支付宝支付）</span>
                </div>
              </div>
              <!--          <div class="flex">-->
              <!--            <div class="bflex-5">-->
              <!--              <span class="wei">支付状态：</span>-->
              <!--              <span v-show="ditem.zfzt=='1'">未支付</span>-->
              <!--              <span v-show="ditem.zfzt=='2'">已支付</span>-->
              <!--            </div>-->
              <!--          </div>-->
            </div>
            <div class="goodsList">
              <el-table
                  :data="orderListData[orderListHover].goodsArr"
                  stripe
                  height="250"
                  style="width: 100%">
                <el-table-column
                    label="商品"
                    prop="name"
                    width="300"
                >
                  <template slot-scope="scope">
                    <div class="flex wei">{{ scope.row.name }}</div>
                    <div v-show="scope.row.data">规格：{{ scope.row.data }}</div>
                    <div v-show="scope.row.attribute">属性：{{ scope.row.attribute }}</div>
                    <div v-show="scope.row.material">加料：{{ scope.row.material }}</div>
                  </template>
                </el-table-column>
                <el-table-column
                    prop="num"
                    label="数量"
                >
                  <template slot-scope="scope">
                    <div>X{{ scope.row.num }}</div>
                  </template>
                </el-table-column>
                <el-table-column
                    prop="money"
                    label="金额"
                >
                </el-table-column>
              </el-table>
              <div class="flex flex-col-end fon_14 mar_r10 mar_t5" v-if="ditem.isOut=='2'">
                <div>包装费：{{ditem.tablewareMoney}}元</div>
              </div>
            </div>
            <div class="pad_10 t_c anniu">
              <el-button plain size="medium" v-if="activeName!='1'"
                         @click="modifyFastOrder(ditem.id,'print')">打印小票
              </el-button>
              <el-button type="primary" size="medium" class="jiedan" v-if="ditem.state=='2'"
                         @click="modifyFastOrder(ditem.id,'receipt')">接单并打印
              </el-button>
              <el-button size="medium" type="danger" v-if="ditem.state=='2' && (ditem.origin!='5' && ditem.payMode!='6' && ditem.payMode!='7' && ditem.payMode!='8' && ditem.payMode!='9')"
                         @click="modifyFastOrder(ditem.id,'rejection')">拒单并退款
              </el-button>
              <el-button type="primary" size="medium" v-if="ditem.state=='3'"
                         @click="modifyFastOrder(ditem.id,'call')">取单并叫号
              </el-button>
              <el-button size="medium" type="danger" v-if="ditem.state=='3'"
                         @click="modifyFastOrder(ditem.id,'refund')">退款
              </el-button>
              <el-button type="success" size="medium" v-if="ditem.state=='3'"
                         @click="modifyFastOrder(ditem.id,'confirm')">完成
              </el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog
        title="查看小程序码"
        :visible.sync="dialogFormVisible"
        width="600px"
        :close-on-click-modal="false"
    >
      <div class="t_c">
        <div class="pad_20">
          <img :src="codeimg" style="width: 200px;height: 200px;">
        </div>
      </div>
    </el-dialog>
    <div style="height: 0; overflow: hidden">
      <KcPrint :data="printData" ref="kcprint" />
    </div>
  </div>
</template>
<script>
import {fastOrderList, modifyFastOrder} from "@/api/instore";
import index from "../../api/index";
import {changeDate} from "@/utils/index";
import {getCode} from "@/api/setup";
import {getStoreBasic} from "@/api/shop";
import {orderContent} from '@/api/order';
import KcPrint from "@/components/printTem/kcPrint";

export default {
  components: {KcPrint},
  created() {
    this.getStoreBasic()
    this.fetchData();
  },
  data() {
    return {
      orderType:"1",
      path: '',
      activeName: '1',
      formInline: {
        tabPosition: '1',
        keyword: '',
        timeData: [],
      },
      form: {
        goodsSet: [],
        enterStore: '1',
        showType: '1',
        distance: '',
      },
      orderListHover: 0,
      orderListData: [],
      listLoading: false,
      selectRows: "",
      elementLoadingText: "正在加载...",
      page: {
        total: 0,
        size: 10,
        currentPage: 1,
      },
      dialogFormVisible: false,
      codeimg: '',
      storeId:'',
      printData: {},
    }
  },
  methods: {
    handleTabClick2() {
      if (this.orderType == '1') {
        this.$router.push(`/infastorder?orderType=1`);
      } else if (this.orderType == '2') {
        this.$router.push(`/infastorderquery?orderType=2`);
      }
    },
    async getStoreBasic(){
      const {data} = await getStoreBasic();
      if (data.id) {
        this.storeId = data.id
        this.init();
      }
    },
    async init() {
      const publishUrl = `https://bkycms.com/addons/yb_wm/views/channel/index/index.html#/fastScreen?storeId=${this.storeId}`;
      const backendPath = index.isDev ? publishUrl : location.href.match(/(\S*)views/)[1] + `views/channel/index/index.html#/fastScreen?storeId=${this.storeId}`;
      this.path = backendPath
    },
    async fetchData() {
      var params = {
        page: this.page.currentPage,
        timeType: this.formInline.tabPosition,
        keyword: this.formInline.keyword,
        state: this.activeName,
        startTime: this.formInline.timeData[0] ? changeDate(this.formInline.timeData[0]) : '',
        endTime: this.formInline.timeData[1] ? changeDate(this.formInline.timeData[1]) : '',
      }
      const {data, count} = await fastOrderList(params);
      this.orderListData = data ? data : [];
      this.page.total = count;
    },
    onSearch() {
      this.fetchData()
    },
    handleTabClick() {
      this.orderListHover = 0
      this.page.currentPage = 1
      this.fetchData()
    },
    handleCurrentChange(val) {
      this.orderListHover = 0
      this.page.currentPage = val;
      this.fetchData()
    },
    chickScreen() {
      let routeData = this.$router.resolve({path: `/fastScreen?storeId=${this.storeId}`, query: {}});
      window.open(routeData.href, '_blank');
    },
    clickOrderList(item, index) {
      this.orderListHover = index
    },
    async modifyFastOrder(orderId, type) {
      if (type == 'receipt') {
        const {msg} = await modifyFastOrder({orderId, type,});
        this.$baseMessage(msg, "success");
        const { data } = await orderContent({orderId,orderType:3});
        Object.keys(data).map(key=>{
          this.printData = data[key];
          this.$nextTick(() => {
            this.$refs.kcprint.printElement(key);
          });
        })
        this.fetchData()
      } else if (type == 'rejection') {
        this.$baseConfirm("您确定拒绝此订单吗", null, async () => {
          const {msg} = await modifyFastOrder({orderId, type,});
          this.$baseMessage(msg, "success");
          this.fetchData()
        });
      } else if (type == 'confirm') {
        this.$baseConfirm("您确定完成此订单吗", null, async () => {
          const {msg} = await modifyFastOrder({orderId, type,});
          this.$baseMessage(msg, "success");
          this.fetchData()
        });
      } else if (type == 'call') {
        const {data, msg} = await modifyFastOrder({orderId, type,});
        let audio = new Audio()
        audio.src = data
        audio.play();
        this.$baseMessage(msg, "success");
        this.fetchData()
      } else if (type == 'print') {
        const {msg} = await modifyFastOrder({orderId, type,});
        this.$baseMessage(msg, "success");
        const { data } = await orderContent({orderId,orderType:3});
        Object.keys(data).map(key=>{
          this.printData = data[key];
          this.$nextTick(() => {
            this.$refs.kcprint.printElement(key);
          });
        })
        this.fetchData()
      } else if (type == 'refund') {
        this.$baseConfirm("您确定退款此订单吗", null, async () => {
          const {msg} = await modifyFastOrder({orderId, type,});
          this.$baseMessage(msg, "success");
          this.fetchData()
        });
      }else {
        this.$baseMessage('敬请期待', "success");
        this.fetchData()
      }
    },
    async getCode() {
      this.dialogFormVisible = true
      const {data} = await getCode({ident: 'fastOrder', page: 'yb_wm/shop/ffmode/goods'});
      this.codeimg = data ? data : ''
    },
  },
}
</script>
<style lang="scss">
.infastorder {
  .orderList {
    border-bottom: 1px solid #EBEEF5;
    background: #fff;

    .number {
      background: #4675e0;
      /*padding: 18px 12px;*/
      height: 57px;
      line-height: 57px;
      width: 75px;
      text-align: center;
      color: #fff;
      font-weight: bold;
      border-radius: 5px;
    }
    .number2{background: #67C23A;}
    .type2{
      padding: 2px;
      border-radius: 3px;
    }
    .type {
      //background: #54BBA5;
      color: #fff;
      padding: 2px;
      border-radius: 3px;
    }
    .bg2{
      background: #2e63dc;
    }
    .bg3{
      background: #F56C6C;
    }
    .bg4{
      background: #adadad;
    }
  }

  .orderListHover, .orderList:hover {
    background: #f7f7f7;
  }

  .orderLeft {
    border-right: 1px solid #E1E1E1;
  }

  .orderMsg {
    min-height: 500px;
    /*border-left: 1px solid #E1E1E1;*/

    .shuju_title {
      background: #fff;
    }

    .msgNumber {
      color: #155BD4;
      font-size: 20px;
      font-weight: bold;
    }

    .goodsList {
      width: 510px;
      .el-table__header-wrapper {
        font-size: 12px;
      }

      .el-table__body-wrapper {
        font-size: 12px;
      }

      .goodTit {
        background: #f5f5f5;
      }
    }

    .anniu {
      .jiedan {
        width: 160px;
      }

      .el-button--danger.is-plain:hover {
        border-color: #fbc4c4;
        color: #fff;
      }
    }
  }

  .zwsj {
    min-height: 400px;
    font-size: 14px;
    color: #999;
  }
  .bgh{
    background: #F56C6C;
  }
}

</style>
